<template>
	<view class="content" v-for="v in list" :key="v.id">
		<view class="message">
			<text>{{v.name}}</text><text>{{v.phone}}</text>
		</view>
		<view class="address">
			{{v.area}}{{v.place}}
		</view>
		<view class="edit">
			<view >
				<view  @click="radioChange">
					<text :style="v.type?'background-color:blue':'background-color:white'" :data-v="v.id"></text>
				</view>
				<text>设为默认</text>
			</view>
			<view  >
				<uni-icons type="compose"></uni-icons><text @click="edit" :data-v="v.id">编辑</text>
				<uni-icons type="trash"></uni-icons><text @click="del" :data-v="v.id">删除</text>
			</view>
			
		</view>
	</view>
	<view class="ex"></view>
	<button @click="goto">添加地址</button>
</template>

<script>
	import {reactive,toRefs,onMounted} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import myRequest from '../../../utils/myRequest.js'
	import store from '../../../store/index.js'
	export default {
		setup() {
			let data=reactive({
				vipId:'',
				list:[{id:1,name:'原因',phone:'16573843213',address:'四川省成都市武侯区云华街道',value:0},
					{id:2,name:'原因',phone:'16573843213',address:'四川省成都市武侯区云华街道',value:0},
					{id:3,name:'原因',phone:'16573843213',address:'四川省成都市武侯区云华街道',value:0},
					{id:4,name:'原因',phone:'16573843213',address:'四川省成都市武侯区云华街道',value:0}],
				radioChange(ev) {
					for(let i=0;i<this.list.length;i++){
						if(this.list[i].id==ev.target.dataset.v){
							this.list[i].type=1;
						}else{
							this.list[i].type=0
						}
					}
					this.list.forEach(v=>{
						myRequest({
							url:'/editharvest',
							method:'post',
							data:{
								id:v.id,
								name:v.name,
								phone:v.phone,
								code:v.code,
								area:v.area,
								place:v.place,
								type:v.type
							}
						}).then(res=>{
							data.getData()
						})
					})
					
				},
				goto() {
					uni.navigateTo({
						url:'/pages/My/HarvestAddress/editAddress'
						})
				},
				getData(){
					myRequest({
						url:'/getharvest',
						data:{
							vipId:this.vipId
						}
					}).then((res)=>{
						data.list=res.data.data
					})
				},
				
				del(ev){
					myRequest({
						url:'/delharvest',
						method:'post',
						data:{
							id:ev.target.dataset.v,
						}
					}).then((res)=>{
					data.getData()	
					})
				},
				edit(ev){
					let address;
					this.list.forEach(v=>{
						if(v.id==ev.target.dataset.v){
							address=v;
						}
					})
					uni.setStorageSync('address',JSON.stringify(address))
					uni.navigateTo({
						url:'/pages/My/HarvestAddress/editAddress?flag=1'
						})
				}
			})
			onMounted(()=>{
				data.vipId=store.state.userdata[0].vipId;
				data.getData()
			})
			onLoad((e)=>{
				
			})
			onShow(()=>{
				data.getData()
			})
			return {...toRefs(data)}
		},
		
	}
</script>

<style lang="scss">
.content{
	margin-bottom: 30rpx;
	border-top:1px solid #F2F2F2;
	font-size:30rpx ;
	.message{
		padding: 0 25rpx;
		padding-top: 25rpx;
		text:first-child{
			margin-right: 20rpx;
		}
	}
	.address{
		color:#999999 ;
		padding: 0 25rpx;
		padding-bottom: 25rpx;
	}
	.edit{
		color:#999999 ;
		padding: 15rpx 25rpx;
		margin-top: 10rpx;
		border-top: 1px solid #F2F2F2;
		border-bottom: 1px solid #F2F2F2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		view:first-child{
			display: flex;
			align-items: center;
			view{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 20rpx;
				height:20rpx;
				border: 1px solid rgb(153,153,163);	
				border-radius: 20rpx;
				text{
				margin-left:0;
				width: 20rpx;
				height:20rpx;
				border-radius: 20rpx;
				transform: scale(0.7);
				}
			}
			text{
				margin-left:10rpx;
			}
		}
		view:last-child{
			text:first-child{
				margin-left: 25rpx;			}
		}
	}
}
button{
	height: 100rpx;
	line-height:100rpx;
	width: 750rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: #007AF6;
	color: white;
	border-radius: 0;
}
.ex{
	height: 100rpx;
	width: 750rpx;
}
</style>
